import React, {useState} from "react";
import {Button, Chip, Divider, Grid, Paper, Typography} from "@material-ui/core";
import MenuDropDown from "../../../../Common/MenuDropDown/MenuDropDown";
import {useDispatch, useSelector} from "react-redux";
import {
  getActivityExtensionIdValues,
  resetActivityExtensionIdValues,
  selectDeselectExtensionId
} from "../../../../../../../redux/reducers/editor";

export default function ActivityDetails(props) {
  // Props
  const {classes, activityExtensionData, selectedActivityExtensionData, styles} = props;

  // Redux store
  let extensionValues = useSelector(state => state.editor.fetchedData.activityExtensionIdValue);

  // Local constants
  const dispatch = useDispatch();
  const [loading, setLoading] = useState("Loading data...")
  const [selection, setSelection] = useState({
    activityFeatures: {id: "", type: "", name: "", values: []},
    details: {id: "", name: ""},
    values: {id: "", name: ""},
    chips: selectedActivityExtensionData.length !== 0 ? selectedActivityExtensionData : []
  });

  const handleSelection = (label, value) => {
    if (label === "activityFeatures") {
      setSelection({
        ...selection,
        [label]: value,
        details: {id: "", name: ""},
        values: {id: "", name: ""}
      });
    } else if (label === "details") {
      setLoading("Loading data...")
      dispatch(resetActivityExtensionIdValues());
      setSelection({
        ...selection,
        [label]: value,
        values: {id: "", name: ""}
      });
      if (selection.details.name !== value.name) {
        setTimeout(() => {
          setLoading("No data found")
        }, 2000)
      }
      dispatch(getActivityExtensionIdValues(selection.activityFeatures, value));
    } else {
      setSelection({
        ...selection,
        [label]: value,
      });
    }
  };

  const handleAddExtension = () => {
    let newActivityExtensionData = selectedActivityExtensionData;
    newActivityExtensionData.push({
      pId: selection.activityFeatures.id,
      pName: selection.activityFeatures.name,
      type: selection.activityFeatures.type,
      id: selection.details.id,
      name: selection.details.name,
      values: selection.values
    })
    setSelection({
      ...selection,
      values: {id: "", name: ""},
      chips: newActivityExtensionData
    })
    dispatch(selectDeselectExtensionId(newActivityExtensionData));
  };

  const handleDeleteExtension = (chip) => {
    let newActivityExtensionData = selectedActivityExtensionData.filter(a => (a.values.id !== chip.values.id));
    setSelection({
      ...selection,
      details: {id: "", name: ""},
      values: {id: "", name: ""},
      chips: newActivityExtensionData
    });
    dispatch(selectDeselectExtensionId(newActivityExtensionData));
  }

  const handleClearAllExtension = () => {
    setSelection({
      ...selection,
      details: {id: "", name: ""},
      values: {id: "", name: ""},
      chips: []
    });
    dispatch(selectDeselectExtensionId([]));
  }

  return (
    <>
      <Paper elevation={10} className={classes.gutterTopBottom}>
        <Grid container>
          <Grid item xs>
            <MenuDropDown
              displayLabel={"Features of activities"}
              parameterName={"activityFeatures"}
              source={activityExtensionData}
              value={selection.activityFeatures.name}
              handleSelection={handleSelection}
            />
          </Grid>
          {selection.activityFeatures.name ? (
            <>
              <Grid item xs>
                <MenuDropDown
                  middle={true}
                  displayLabel={"Details"}
                  parameterName={"details"}
                  source={selection.activityFeatures.values}
                  value={selection.details.name}
                  handleSelection={handleSelection}
                />
              </Grid>
              {selection.details.name ? (
                <Grid item xs>
                  <MenuDropDown
                    middle={true}
                    displayLabel={extensionValues.length !== 0 ? "Values" : loading}
                    parameterName={"values"}
                    source={extensionValues}
                    value={selection.values.name}
                    handleSelection={handleSelection}
                  />
                </Grid>
              ) : <></>}
            </>
          ) : <></>}
          <Button
            onClick={handleAddExtension}
            disabled={selection.values.name === ""}
            variant="contained"
            color="primary"
            className={styles.applyButton}
          >
            Select
          </Button>
        </Grid>
      </Paper>
      <Grid container justify="space-between" alignItems="center" className={classes.gutterTopBottom}>
        <Grid item>
          <Typography variant="overline">Selected Features of Activities</Typography>
        </Grid>
        <Grid item>
          <Button color="primary" size="small" variant="outlined"
                  onClick={handleClearAllExtension} disabled={selection.chips.length === 0}>
            <Typography variant="overline">Clear selections</Typography>
          </Button>
        </Grid>
      </Grid>
      <Grid item style={{minHeight: 40}}>
        {selection.chips.map((chip, index) => {
          return (
            <Chip
              key={index}
              label={chip.pName + " | " + chip.name + " | " + chip.values.name}
              variant="default"
              onDelete={() => handleDeleteExtension(chip)}
              color="primary"
              className={styles.chipMargin}
            />
          )
        })}
      </Grid>
      <Grid item className={classes.gutterBottom}>
        <Divider/>
      </Grid>
    </>
  );
}
